
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Creating a hierarchical ListBox widget</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

    #mylistbox em {
        font-style:normal;
    }

    #selected {
        border:1px solid #aaa;
        padding:2px;
        width:15em;
    }

    .yui3-listbox {
        padding:0;       
        margin: .25em;
        border: solid 1px #000;
        background-color:#fff;
        white-space:nowrap;
    }

    .yui3-listbox .yui3-listbox {
        margin-top: .25em;
        margin-bottom: .25em;
        border: none;
    }

    .yui3-listbox .yui3-option, 
    .yui3-listbox .yui3-listbox-option {
        margin:0;
        padding:0;
        cursor:default;
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
    }

    .yui3-option-content,
    .yui3-listbox-label {
        display: block;
        padding: .25em .5em;
    }

    .yui3-listbox-content {
        margin:0;
        padding:0;
        overflow:auto;
    }

    .yui3-listbox .yui3-listbox .yui3-option-content {
        margin-left:.5em;
    }

    .yui3-listbox-label {
        font-weight: bold;
    }

    .yui3-option-selected {
        background-color: #cccccc;
    }

    .yui3-option-focused {
        outline: none;
        background-color: blue;
        color: #fff;
    }
</style>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Creating a hierarchical ListBox widget</h1>

<div class="exampleIntro">
	<p>This is an advanced example, in which we create a ListBox widget with nested Option widgets, by extending the base <code>Widget</code> class, and adding <code>WidgetParent</code> and <code>WidgetChild</code> extensions, through <code>Base.build</code>.</p>

<p><a href="../tabview">TabView</a> which ships with 3.1.0, is also built using the WidgetParent and WidgetChild extensions.</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<p id="selected">Selected: <span id="selection">None</span></p>

<div id="exampleContainer"></div>

<script type="text/javascript">
    YUI({ 
        modules: {
            "listbox": {
                fullpath: "assets/listbox.js",
                requires: ["substitute", "widget", "widget-parent", "widget-child", "node-focusmanager"]
            }
        }
     }).use("listbox", function (Y) {

        var listbox = new Y.ListBox({  
            id:"mylistbox", 
            width:"13em", 
            height:"15em", 
            children: [ 
                { label: "Item One" },
                { label: "Item Two" } 
            ]
        });

        listbox.add({ 
            type: "ListBox", 
            label: "Item Three", 
            children: [ 
                { label: "Item Three - One" },
                { label: "Item Three - Two" } 
            ]
        });

        listbox.add({ label: "Item Four" });

        listbox.add(
            new Y.Option({ label: "Item Five" })
        );

        listbox.add({ 
            type: "ListBox", 
            label: "Item Six", 
            children: [ 
                { label: "Item Six - One" },
                { label: "Item Six - Two" }
            ]
        });

        listbox.after("selectionChange", function(e) {

            var selection = this.get("selection");
            if (selection instanceof Y.ListBox) {
                selection = selection.get("selection");
            }

            if (selection) {
                Y.one("#selection").setContent(selection.get("label"));
            }
        });

        listbox.render("#exampleContainer");
    });
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
